<template>
    <div>
        <select v-model="lineType" @change="chooseLine">
            <option value="">请选择图表类型</option>
            <option value="baseOption">基础折线图</option>
            <option value="diKarOption">笛卡尔折线图</option>
            <option value="emptyOption">空数据处理</option>
            <option value="stackOption">堆叠折线图</option>
            <option value="areaOption">区域面积图</option>
            <option value="floorOption">阶梯线图</option>
        </select>

        <div class="main" ref="main" v-show="isShow"></div>
    </div>
</template>

<script>
    import * as echarts from "echarts";

    export default {
        name: "LineView",
        data(){
            return {
                myChart : null,
                lineType: "",
                isShow : false,
                // 普通折线图
                baseOption : {
                    tooltip:{
                      trigger : "axis"
                    },
                    xAxis : {
                        type : "category",
                        data : ['北京','上海','广州',"西安","成都"]
                    },
                    yAxis : {
                        type : "value"
                    },
                    legend : {},
                    series : [
                        {
                            name : "气温",
                            type : "line",
                            smooth : true,
                            data : [26, 29, 33, 22, 18]
                        },
                        {
                            name : "湿度",
                            type : "line",
                            smooth : true,
                            data : [15, 22, 33, 18, 15]
                        }
                    ]
                },
                // 笛卡尔坐标系折线图
                diKarOption : {
                    xAxis : {},
                    yAxis : {},
                    series :{
                        type: 'line',
                        data: [
                            [10, 50],
                            [20, 150],
                            [30, 50],
                            [40,150]
                        ],
                        // 折线的样式
                        lineStyle : {
                            color : "#ff6700",
                            width :5,
                            type : "dashed"
                        },
                        //数据点样式
                        itemStyle : {
                            color : "#00F",
                            borderColor: "#000",
                            borderWidth :10
                        },
                        //series.emphasis.label.show:在鼠标移动到该数据时，才显示数值。
                        emphasis :{
                            // 不加emphasis则直接将数值显示
                            label: {
                                show : true,
                                position: 'left',
                                textStyle: {
                                    fontSize: 18
                                }
                            }
                        }
                    }
                },
                // 空数据处理
                emptyOption: {
                    xAxis: {
                        data: ['A', 'B', 'C', 'D', 'E']
                    },
                    yAxis: {},
                    series: [
                        {
                            data: [0, 22, '-', 23, 19],
                            type: 'line'
                        }
                    ]
                },
                // 堆叠折线图
                stackOption :{
                    xAxis :{
                        type : "category",
                        data :['A','B','C','D','E']
                    },
                    yAxis : {},
                    tooltip: {
                        trigger : "axis"
                    },
                    legend:{},
                    series : [
                        {
                            name : "A",
                            data: [10, 22, 28, 43, 49],
                            type: "line",
                            stack : "x",
                            areaStyle : {}  // 重点
                        },
                        {
                            name : "B",
                            data: [5, 4, 3, 5, 10],
                            type: "line",
                            stack : "x",
                            areaStyle : {}
                        }
                        //堆叠折线图,一般建议使用区域填充色 areaStyle 以表明堆叠的情况
                    ]
                },
                // 区域面积图
                areaOption : {
                    xAxis: {
                        data: ['A', 'B', 'C', 'D', 'E']
                    },
                    yAxis: {},
                    legend : {},
                    series: [
                        {
                            name:"区域A",
                            data: [10, 22, 28, 23, 19],
                            type: 'line',
                            areaStyle: {}
                        },
                        {
                            name:"区域B",
                            data: [25, 14, 23, 35, 10],
                            type: 'line',
                            areaStyle: {
                                color: '#ff0',
                                opacity: 0.5
                            }
                        }
                       ]
                },
                // 阶梯线图
                floorOption :{
                    xAxis: {
                        type: 'category',
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: 'Step Start',
                            type: 'line',
                            step: 'start',
                            data: [120, 132, 101, 134, 90, 230, 210]
                        },
                       {
                            name: 'Step Middle',
                            type: 'line',
                            step: 'middle',
                            data: [220, 282, 201, 234, 290, 430, 410]
                        },
                         {
                            name: 'Step End',
                            type: 'line',
                            step: 'end',
                            data: [450, 432, 401, 454, 590, 530, 510]
                        }
                    ]
                }
            }
        },
        mounted(){
            // this.myChart = echarts.init(this.$refs.main);
            // this.myChart.setOption(this.baseOption); // 普通的折线图
            // this.myChart.setOption(this.diKarOption); // 笛卡尔折线图
            // this.myChart.setOption(this.emptyOption); // 处理空数据的折线图
            // this.myChart.setOption(this.stackOption); // 处理堆叠数据的折线图
            // this.myChart.setOption(this.areaOption); // 区域面积图
            // this.myChart.setOption(this.floorOption); // 阶梯线图
        },
        beforeDestroy(){
            if(this.myChart){
                this.myChart.dispose();
            }
        },
        methods: {
            chooseLine(){
                if(this.myChart){
                    this.myChart.dispose();
                    this.isShow = false
                }

                this.myChart = echarts.init(this.$refs.main);
                this.myChart.setOption(this[this.lineType]);
                this.isShow = true
            }
        }
    }
</script>

<style scoped>
    .main {
        width: 60vw;
        height: 550px;
        box-shadow: 1px 1px 10px #333;
        margin: 20px auto;
    }
</style>